<!--
 * @Date: 2023-04-04 17:54:43
 * @LastEditTime: 2023-05-08 09:35:24
-->
<template>
  <a-drawer
    title="请选择语言"
    placement="right"
    width="600"
    :closable="true"
    :visible="visible"
    :destroyOnClose="true"
    @close="onClose"
  >
    <div class="search_form">
      <a-input-search v-model="form.key" placeholder="搜索语言" @search="getLanguageList" />
      <a-button @click="reset">重置</a-button>
    </div>

    <div class="languages">
      <div :class="['language', key]" v-for="(value, key) in languageList" :key="key">
        <div class="letter">{{ key }}</div>
        <a-space>
          <p
            v-for="i in value"
            :class="['value', { selected: checkedIdList.includes(i.language_id) }]"
            :key="i.language_id"
            @click="clickLanguage(i)"
          >
            {{ i.language_name }}
          </p>
        </a-space>
      </div>
    </div>

    <a-space>
      <a-button type="primary" @click="submit">确认新增</a-button>
      <a-button type="primary" ghost @click="unsave">暂不保存</a-button>
    </a-space>
  </a-drawer>
</template>

<script>
import { languageList } from '@/api/language'

export default {
  name: 'Language',
  props: {
    checkedArr: { type: Array, default: () => [] }
  },
  data () {
    return {
      visible: false,
      languageList: [],
      checkedIdListCache: [],
      checkedIdList: [],
      form: { key: '' }
    }
  },

  mounted () {},

  watch: {
    checkedArr: { handler: 'checkedArrListener', immediate: true }
  },

  methods: {
    // 打开抽屉
    open () {
      this.visible = true
      // type：1 ==> 设置首字母排序
      this.form.type = 1
      this.getLanguageList()
    },
    // 语言列表
    getLanguageList () {
      languageList(this.form).then((res) => {
        if (res.code === 200) this.languageList = res.data || []
      })
    },
    // 监听父组件传入的已选中语言列表
    checkedArrListener () {
      this.$set(this, 'checkedIdList', [])
      this.$set(this, 'checkedIdListCache', [])

      if (this.checkedArr.length) {
        const idList = []
        const idListCache = []

        this.checkedArr.forEach((item) => {
          const { language_id } = item
          idList.push(language_id)
          idListCache.push(language_id)
        })

        this.$set(this, 'checkedIdList', idList)
        this.$set(this, 'checkedIdListCache', idListCache)
      }
    },
    // 选择语言
    clickLanguage (language) {
      const { language_id } = language
      if (!this.checkedIdList.includes(language_id)) this.checkedIdList.push(language_id)
      else this.checkedIdList = this.checkedIdList.filter((item) => item !== language_id)
    },
    // 重置
    reset () {
      this.form.key = ''
      this.getLanguageList()
    },
    // 暂不保存
    unsave () {
      this.checkedIdList = [...this.checkedIdListCache]
    },
    // 关闭
    onClose () {
      this.visible = false
      this.unsave()
    },
    // 确定
    submit () {
      const list = []

      this.checkedIdList.forEach((item) => {
        list.push(
          Object.values(this.languageList)
            .flat()
            .find((language) => language.language_id === item)
        )
      })
      this.onClose()
      this.$emit('change', list)
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.ant-drawer-body) {
  height: calc(100% - 55px);

  .search_form {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;

    .ant-input-search {
      flex: 1;
    }

    .ant-btn {
      width: 64px;
      margin-left: 10px;
    }
  }

  .languages {
    height: calc(100% - 79px);
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 0;
    }

    .language {
      width: 100%;
      height: fit-content;
      margin-bottom: 15px;

      .value {
        cursor: pointer;

        &.selected {
          color: aqua;
          // cursor: context-menu;
        }
      }
    }
  }
}
</style>
